<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui" template="/templates/layout.xhtml">

	<ui:define name="ptitle">应用主题切换</ui:define>
	<ui:define name="pcontent">
		<h:form id="frm">
			<p:growl id="msgs" showDetail="true" />

			<p:panel header="主题切换" style="margin:10px 0px"
				footer="从下拉框中选择一种主题即可实现主题切换。">

				<h:panelGrid columns="4" cellpadding="10" cellspacing="10">
					<p:outputLabel for="basic" value="基本模式:" />
					<p:themeSwitcher id="basic" style="width:165px"
						value="#{themeSwitcherBean.theme}" effect="fade">
						<f:selectItem itemLabel="主题选择" itemValue="" />
						<f:selectItems value="#{themeSwitcherBean.themes}" var="theme"
							itemLabel="#{theme.displayName}" itemValue="#{theme.name}" />
						<p:ajax update="frm" />
					</p:themeSwitcher>

			        <p:outputLabel for="advanced" value="高级模式" />
			        <p:themeSwitcher id="advanced" style="width:165px" effect="fade" var="t">
			            <f:selectItem itemLabel="主题选择" itemValue="#{null}" />
			            <f:selectItems value="#{themeSwitcherBean.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />
			 
			            <p:column>
			                <h:outputText styleClass="ui-theme ui-theme-#{t.name}" style="display-block" />
			            </p:column>
			 
			            <p:column>
			                #{t.displayName}
			            </p:column>
			            <p:ajax update="frm" />
			        </p:themeSwitcher>
        
				</h:panelGrid>

			</p:panel>

			<p:separator />
			<p:panel header="主题风格展示" style="margin:10px 0px">

			<p:dialog header="Dialog【对话框】" widgetVar="dlg" minHeight="40" modal="true">
				<h:outputText value="Resistance to PrimeFaces is futile!" />
			</p:dialog>

			<p:commandButton value="Dialog【对话框】" onclick="PF('dlg').show()"
				type="button" style="display:block;" />

			<p:panel header="Panel【面板】" style="margin:20px 0px">
                Panel Content
            </p:panel>

			<p:spinner />

			<p:toolbar style="margin:20px 0px">
				<f:facet name="left">
					<p:commandButton type="button" value="New" icon="ui-icon-document" />
					<p:commandButton type="button" value="Open"
						icon="ui-icon-folder-open" />
					<p:commandButton type="button" title="Save" icon="ui-icon-disk" />
					<p:commandButton type="button" title="Delete" icon="ui-icon-trash" />
					<p:commandButton type="button" title="Print" icon="ui-icon-print" />
				</f:facet>

				<f:facet name="right">
					<p:menuButton value="Navigate">
						<p:menuitem value="Home" url="http://www.primefaces.org" />
						<p:menuitem value="ShowCase"
							url="http://www.primefaces.org/showcase" />
						<p:menuitem value="TouchFaces"
							url="http://www.primefaces.org/showcase/touch" />
					</p:menuButton>
				</f:facet>
			</p:toolbar>

			<p:accordionPanel>
				<p:tab title="Tab1【标签】">标签1内容</p:tab>
				<p:tab title="Tab2【标签】">标签2内容</p:tab>
				<p:tab title="Tab3【标签】">标签3内容</p:tab>
			</p:accordionPanel>
			</p:panel>
			<p:separator />
		</h:form>

	</ui:define>
</ui:composition>

